<template>
  <div id="app">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials";
import BoldPlugin from "@ckeditor/ckeditor5-basic-styles/src/bold";
import ItalicPlugin from "@ckeditor/ckeditor5-basic-styles/src/italic";
import LinkPlugin from "@ckeditor/ckeditor5-link/src/link";
import ParagraphPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
import RemoveFormat from "@ckeditor/ckeditor5-remove-format/src/removeformat";
import WordCount from "@ckeditor/ckeditor5-word-count/src/wordcount";
import Highlight from "@ckeditor/ckeditor5-highlight/src/highlight";
// import WordCount from "@ckeditor/ckeditor5-word-count/src/wordcount";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import Font from "@ckeditor/ckeditor5-font/src/font";
//没啥效果
import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat";
import Indent from "@ckeditor/ckeditor5-indent/src/indent";
import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
import List from "@ckeditor/ckeditor5-list/src/list";

//没啥效果
import TextTransformation from "@ckeditor/ckeditor5-typing/src/texttransformation";
//引用
import BlockQuote from "@ckeditor/ckeditor5-block-quote/src/blockquote";
// 上传
 import SimpleUploadAdapter from "./ckeditor5-upload/src/adapters/simpleuploadadapter";
//import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
//传文件
//import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import Image from "@ckeditor/ckeditor5-image/src/image";
import ImageToolbar from "@ckeditor/ckeditor5-image/src/imagetoolbar";
import ImageCaption from "@ckeditor/ckeditor5-image/src/imagecaption";
import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import ImageUpload from "@ckeditor/ckeditor5-image/src/imageupload";
export default {
  name: "app",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "",
      editorConfig: {
        heading: {
          options: [
            {
              model: "paragraph",
              title: "Paragraph",
              class: "ck-heading_paragraph"
            },
            {
              model: "heading1",
              view: "h1",
              title: "Heading 1",
              class: "ck-heading_heading1"
            },
            {
              model: "heading2",
              view: "h2",
              title: "Heading 2",
              class: "ck-heading_heading2"
            },
            {
              model: "heading3",
              view: "h3",
              title: "Heading 3",
              class: "ck-heading_heading3"
            },
            {
              model: "heading4",
              view: "h4",
              title: "Heading 4",
              class: "ck-heading_heading4"
            },
            {
              model: "heading5",
              view: "h5",
              title: "Heading 5",
              class: "ck-heading_heading5"
            }
          ]
        },
        fontSize: {
          options: [9, 11, 13, "default", 17, 19, 21]
        },
        simpleUpload: {
          // The URL that the images are uploaded to.
          uploadUrl: "http://testcms.duzhe.com/api/img/upload",
          // Headers sent along with the XMLHttpRequest to the upload server.
          headers: {
            token: "6486a7d5fe6b4eb481df906e8814d920"
            // Authorization: "Bearer <JSON Web Token>"
          }
        },
        plugins: [
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin,
          Alignment,
          WordCount,
          Highlight,
          RemoveFormat,
          Heading,
          Font,
          Autoformat,
          Indent,
          IndentBlock,
          List,
          TextTransformation,
          BlockQuote,
           Image,
           ImageToolbar,
        //   ImageCaption,
        //   ImageStyle,
        //   ImageResize,
          ImageUpload,
          SimpleUploadAdapter
          //CKFinder,
          //wordCount
        ],

        toolbar: {
          items: [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "undo",
            "redo",
            "alignment",
            "Highlight",
            "RemoveFormat",
            "fontSize",
            "fontFamily",
            "fontColor",
            "fontBackgroundColor",
            "outdent",
            "indent",
            "bulletedList",
            "numberedList",
            "BlockQuote",
            // "imageTextAlternative",
            // "|",
            // "imageStyle:full",
            // "imageStyle:side",
            "ImageUpload"
          ]
        }
      }
    };
  },
  watch: {
    editorData() {
      console.log(this.editorData);
    }
  }
};
</script>